<template>
    <div>
        <el-row>
            <el-col>
                <div class="movie-header">
                    <span>旅游</span>
                    <span class="all">查看全部 <span class="iconfont">&#xe625;</span></span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <ul>
                    <li v-for="(item,index) of list" :key="index">
                        <img :src="item.src" >
                        <span class="gonglue">{{item.chinese}}</span>
                        <span class="english">{{item.english}}</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'HomeList',
    data() {
        return {
            list: [
                {src: '//gss0.bdstatic.com/8r1VfDn7KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/ly-mudidi_51c0cde.jpg',
                chinese: '目的地攻略',
                english: 'Travelling guide'},
                {src: '//gss0.bdstatic.com/8r1VfDn7KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/ly-xingcheng_77e0c83.jpg',
                chinese: '行程计划',
                english: 'Travelling plan'},
                {src: '//gss0.bdstatic.com/8r1VfDn-KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/ly-youji_7f7dac8.jpg',
                chinese: '游记',
                english: 'Travelling notes'}
                ]
        }
    },
}
</script>


<style lang="stylus" scoped>
    .movie-header
        display: flex;
        justify-content: space-between;
        span:nth-child(1)
            font-weight: 550;
            font-size: 20px;
            margin-left: 143px;
            margin-top: 36px
        .all
            margin-top: 36px;
            margin-right: 150px;
            display: block;
            font-size: 14px;
            font-weight: normal;
            .iconfont
                margin-left: 0;
                color: #aaa;
                position: relative;
                top: 1px;
                right: 3px;
                font-size: 15px;
    ul
        width: 1260px;
        height: 380px;
        margin-left: 85px;
        li
            width: 387px;
            height: 342px;
            display: inline-block;
            list-style-type: none;
            padding: 15px;
            position: relative;
            margin-right: 3px;
            &:hover
                box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .1);
            img
                width: 387px;
                height: 339px;
            .gonglue
                position: absolute;
                top: 70px;
                left: 50px;
                color: #222;
                font-size: 26px;
            .english
                position: absolute;
                top: 115px;
                left: 52px;
                color: #484848;
                font-size: 16px;    
            
</style>

